<#import "/base/baseUrl.html" as baseUrl>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 页面通用jsCSS -->
    <#include "/base/baseJs.html"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">登陆账户</label>
                    <div class="layui-input-block">
                        <input type="text" name="loginName" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phoneNumber" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status">
                            <option value="">所有</option>
                            <option value="1">正常</option>
                            <option value="0">失效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="userTableSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>

            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
            </div>

            <table id="userTable" lay-filter="userTable" class="layui-hide"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="oper-col">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script type="text/html" id="statusHandel">
    {{#  if(d.status == '1'){ }}
        <input type="checkbox" data-id ="{{d.id}}" lay-filter="switchStatus"  name="userStatus" checked lay-skin="switch" lay-text="正常|失效">
    {{# }else{  }}
        <input type="checkbox" data-id ="{{d.id}}" lay-filter="switchStatus" name="userStatus" lay-skin="switch" lay-text="正常|失效">
    {{# } }}
</script>
<script>
    var table;
    layui.use(['table','form','layer'], function(){
        table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem: '#userTable'
            ,url:'${domain}/user/list'
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,cols: [[
                {type:'checkbox'}
                ,{type: 'numbers'}
                ,{field:'name',  title: '用户名'}
                ,{field:'loginName',  title: '登陆名'}
                ,{field:'phoneNumber',  title: '手机号'}
                ,{field:'email',  title: '邮箱'}
                ,{field:'roleName',  title: '所属角色'}
                ,{field:'departmentName',  title: '所属部门'}
                ,{field:'loginCount',  title: '登陆次数'}
                ,{field:'lastLoginTime',  title: '最后登录时间',templet:function (item) {
                            return $.formatDate(item.createTime,"yyyy-MM-dd HH:mm") ;
                        }}
                ,{field:'status',  title: '用户状态',toolbar:"#statusHandel"}
                ,{templet: '#oper-col', title: '操作'}
            ]]
            ,page: true
        });
        /* 操作列按钮点击事件 */
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') { /* 删除按钮 点击事件*/
                removeUserFunc(data.id);
            } else if (layEvent === 'edit') {/* 编辑按钮点击事件 */
                editUserFunc(data.id);
            }
        });
        /* 监听用户状态切换 */
        form.on('switch(switchStatus)', function (data) {
            var nowUserId = $(data.elem).attr("data-id");
            var switchStatusInfo = data.elem.checked?'1':'0';
            $.post("${domain}/user/userSwitchStatusHandel", {"id":nowUserId,"status":switchStatusInfo}, function (res, status) {
                if (res.code != 200) {
                    top.window.layer.alert('切换状态失败' + res.msg, {icon: 5,yes:function () {
                            $(data.elem).prop('checked',data.elem.checked?'':'checked');
                            form.render();
                            top.window.layer.closeAll();
                        }
                    });
                } else {
                    top.window.layer.alert('切换状态成功', {icon: 1});
                }
            });
        });
        //按钮点击事件
        var active = {
            batchdel:function(){
                var checkStatus = table.checkStatus('userTable')
                    ,data = checkStatus.data;
              // layer.alert(JSON.stringify(data));
               var datas=new Array();
               for(var i=0;i<data.length;i++){
                   datas.push(data[i].id);
               }
               removeUserFunc(datas.join(','));
            },
            add: function(){
                Layer.openUrl("数据新增","${domain}/user/userAddUI");
            }
        };
        /* 绑定点击事件 */
        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        /* 条件检索 */
        //监听提交
        form.on('submit(userTableSearch)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('userTable', {
                where: field
            });
        });

    });
    function removeUserFunc(ids) {
        top.window.layer.alert('您确定删除该用户吗？', {
            skin: 'layui-layer-lan' //样式类名
            ,closeBtn: 0
            ,btn:['确定','取消']
        }, function(){
            $.post("${domain}/user/removeUser",{ids:ids},function (data,status) {
                if(data.code!=200){
                    top.window.layer.alert('删除用户失败:'+data.msg, {icon: 5})
                }else {
                    top.window.layer.alert('删除用户成功', {
                        icon: 1, yes: function (index, layero) {
                            table.reload('userTable');
                            /* 关闭弹框 */
                            top.window.layer.closeAll();
                        }
                    })
                }
            });
        });
    }

    function editUserFunc(id) {
        top.window.layer.open({
            skin: 'layui-layer-lan'
            ,title:"修改数据"
            ,type: 2
            ,area: [(top.window.innerWidth*0.45).toString(), (top.window.innerHeight*0.75).toString()]
            ,content:"${domain}/user/editUserUI?id="+id
        });
    }
    /* 切换状态 */
    function switchStatus(dom,id,nowStatus){
        console.log(id+nowStatus)
    }
</script>
</body>
</html>